蓋版廣告的垂直置中技巧跟支援

2019 iT 邦幫忙鐵人賽

DAY 29

Modern Web

連續30天的超實務網頁設計的垂直置中教學系列第 29 篇

2019鐵人賽垂直置中 css 網頁教學 amos

CSScoke

2018-11-13 12:16:42

5510 瀏覽

分享至

數位生態

蓋板廣告太常見到了，目前幾乎人手多機的情況下，我們每天幾乎都離不開上網這行為，上網除了上班用電腦以外，幾乎都是用行動裝置上網了，也就經常會看到蓋版廣告這種網路生態中的常見數位生物（咦？生物？），在一個網路內容多數都閱覽免費的情況下，蓋版廣告可以説是網站經營中不可或缺的收入來源，所以它的重要性可見一班了，今天我們就來~~帶壞大家~~看看蓋版廣告的垂直置中方式。

蓋版廣告版面需求

蓋版廣告基本上要達到廣告區塊會蓋住整個畫面的情況，所以我們需要固定區塊的定位在視窗之中，其中較常見到的方式有兩個，一個是 absolute ，一個則是 fixed，這兩種都有人使用，但要讓你不管怎麼捲動都能蓋住版面的話，那就是要設定 fixed 才行了，有了 fixed 的區塊之後，我們就能在裡面設置我們所想要的垂直直至中畫面了，大致原理就是這樣。所以讓我們來看看蓋版廣告的範例原始碼

只蓋部分並垂直置中

<div class="content">
  <h2>Amos的垂直置中好也</h2>
  <p>
    垂直置中須於中;<br>
    直豎在中皆可置;<br>
    置位於中正且直;<br>
    中於正中不再垂.
  </p>
</div>

.content{
  width: 400px;
  height: 200px;
  padding: 10px;
  background-color: #ccc;
  text-align: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

上面這種寫法的缺點就是需要讓內容有固定高度，有時候我們的內容高度不固定的話就沒辦法了，所以我們可以改用下面的寫法或許更彈性些。

<div class="wrap">
  <div class="content">
    <h2>Amos的垂直置中好也</h2>
    <p>
      垂直置中須於中;<br>
      直豎在中皆可置;<br>
      置位於中正且直;<br>
      中於正中不再垂.
    </p>
  </div>
</div>

.wrap{
  width: 400px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display:flex;
  align-items: center;
}
.content{
  width: 100%;
  padding: 10px;
  background-color: #ccc;
  text-align: center;
}

上面這種寫法讓內容可以不用固定高度，彈性變大了，但支援度也變低了，IE10以下都不支援，但你也可以改用支援度更高的「使用CSS ::before + inline-block 屬性來達到垂直置中」，讓他最低可以支援到IE8。

內容垂直置中，整體蓋好蓋滿通通蓋

這種垂直置中可以讓你有個蓋滿版面的半透明區塊，效果可以說是最常見了，這種區塊的好處是可以讓你對畫面有聚焦效果。

<div class="wrap">
  <div class="content">
    <h2>Amos的垂直置中好也</h2>
    <p>
      垂直置中須於中;<br>
      直豎在中皆可置;<br>
      置位於中正且直;<br>
      中於正中不再垂.
    </p>
  </div>
</div>

.wrap{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  margin: auto;
  display:flex;
  justify-content:center;
  align-items: center;
  background-color: rgba(0,0,0,.3);
}
.content{
  width: 400px;
  padding: 10px;
  background-color: #ccc;
  text-align: center;
}

上面這邊 Amos 利用了半透明的背景色彩來處理那個黑色，而且很偷懶的使用了 flex 來做最直置中，但這種做法可能舊版的瀏覽器（像IE8）不支援這種太新的語法，所以我們也可以改用以下寫法來讓他支援度更高些（支援所有版本瀏覽器）。

.wrap{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  margin: auto;
  text-align:center;
  font-size: 0;
}
.wrap:before{
  content:'';
  display: inline-block;
  width: 0px;
  height: 100%;
  vertical-align: middle;
}
.wrap:after{
  content:'';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  background-color: #000;
  opacity:.5
}
.content{
  width: 400px;
  padding: 10px;
  background-color: #ccc;
  text-align: center;
  position: relative;
  z-index: 1;
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
}

範例頁面
這樣就完美解決了所有問題啦。